<template>
  <div>
    <!-- 标签页 -->
    <van-tabs v-model="active" sticky title-active-color="#ee0a24">
      <van-tab title="菜系">
        <!-- <div> -->
        <van-sticky :offset-top="44">
          <!-- 搜索框 -->
          <van-search
            @focus="$router.push('/search')"
            shape="round"
            v-model="value"
            placeholder="搜索食谱"
            fixed
          >
            <template #right-icon>
              <img width="22px" style="display: block" src="../assets/img/yuyin.svg" />
            </template>
          </van-search>
        </van-sticky>
        <van-grid :column-num="2" square :gutter="8" :center="true" :border="false" clickable>
          <van-grid-item
            v-for="(value, index) in EightCuisines"
            :key="index"
            :to="{ name: 'CookList', params: { value, category: index } }"
          >
            <template #default>
              <van-image lazy-load radius="5px" fit="cover" :src="value[0].img" />
              <div class="cloak"></div>
              <div class="text">{{ index.slice(0, 1).toUpperCase() + index.slice(1, -3) }}</div>
            </template>
          </van-grid-item>
        </van-grid>
        <!-- </div> -->
      </van-tab>
      <van-tab title="食材"><shi-cai /> </van-tab>
      <van-tab title="节日">
        <van-notice-bar
          color="#ee0a24"
          background="#fafafa"
          left-icon="volume-o"
          text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
        />
        <van-grid :column-num="4" :center="true" :border="false" clickable>
          <van-grid-item v-for="(item, index) in festival" :key="index">
            <template #default>
              <van-image radius="5px" fit="cover" src="/img/chuan.jpg" />
              <div style="margin-top: 10px">{{ item }}</div>
            </template>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="专题">
        <van-tabs v-model="secactive" :swipeable="true" title-active-color="#ee0a24">
          <van-tab title="全部">
            <div class="detail">
              <div v-for="(item, index) in allPiece" :key="index">
                <van-image radius="5px" width="40vw" height="40vw" :src="item.img" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="主题美食">
            <div class="detail">
              <div v-for="(item, index) in topic[1].result" :key="index">
                <van-image radius="5px" width="40vw" height="40vw" :src="item.img" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="厨电专题">
            <div class="detail">
              <div v-for="(item, index) in topic[0].result" :key="index">
                <van-image radius="5px" width="40vw" height="40vw" :src="item.img" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="经典美食">
            <div class="detail">
              <div v-for="(item, index) in topic[3].result" :key="index">
                <van-image radius="5px" width="40vw" height="40vw" :src="item.img" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="健康美食">
            <div class="detail">
              <div v-for="(item, index) in topic[2].result" :key="index">
                <van-image radius="5px" width="40vw" height="40vw" :src="item.img" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ShiCai from '../components/ShiCai.vue'

export default {
  components: { ShiCai },
  data() {
    return {
      EightCuisines: {}, // 八大菜系
      ingredients: {}, // 食材
      festival: {}, //节日
      topic: {}, //专题
      allPiece: [], //所有专题
      value: '',
      active: 0,
      secactive: 0, //二级标签栏
      activeselect: 0,
      countLike: 0, // 点赞按钮点击次数
    }
  },
  methods: {
    giveLike() {
      this.countLike++
      if (this.countLike % 2 != 0) {
        console.log(this.countLike)
      }
    },
    getData() {
      this.$axios.get('/staticDatas/caipu').then((res) => {
        console.log(res)
        this.EightCuisines = res.data.result.data[0].result
        // this.ingredients = res.data.result.data[1].result
        this.festival = res.data.result.data[2].result
        this.topic = res.data.result.data[3].result
        this.topic.forEach((item) => {
          item.result.forEach((i) => {
            this.allPiece.push(i)
          })
        })
      })
    },
  },
  mounted() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.active {
  color: #ee0a24;
}
.van-grid-item__content {
  padding: 0 !important;
}
.cloak {
  position: absolute;
  width: 143.5px;
  height: 143.5px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.3);
}
.text {
  position: absolute;
  font-size: 48px;
  z-index: 1;
  color: #ebebeb;
}
.detail {
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  div {
    width: 45%;
    margin-top: 5px;
    .title {
      text-align: center;
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
